<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Manipulation documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>
  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network - manipulation</h1>
      <p>
        Acts as the camera that looks on the canvas. Does the animation, zooming
        and focusing.
      </p>
      <h3>Options</h3>
      <p>
        The options for the manipulation module have to be contained in an
        object titled 'manipulation'.
      </p>
      <p>
        Click on the full options or shorthand options to show how these options
        are supposed to be used.
      </p>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)">
          <a href="#">options hidden</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="fullOptions"
        >
          <a href="#">full options</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="shortOptions"
        >
          <a href="#">shorthand options</a>
        </li>
      </ul>
      <br />
      <pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
  manipulation: {
    enabled: false,
    initiallyActive: false,
    addNode: true,
    addEdge: true,
    editNode: undefined,
    editEdge: true,
    deleteNode: true,
    deleteEdge: true,
    controlNodeStyle:{
      // all node options are valid.
    }
  }
}

network.setOptions(options);
</pre
      >

      <pre class="prettyprint lang-js options top hidden" id="shortOptions">
// only the options that have shorthand notations are shown.
var options = {
  manipulation: false
}

network.setOptions(options);
</pre
      >
      <table class="options" id="optionTable">
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <td>Description</td>
        </tr>
        <tr>
          <td>enabled</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            Toggle the manipulation system on or off. Even when false, the
            manipulation API through the methods will still work. This property
            is optional. If you define any of the options below and enabled is
            undefined, this will be set to true.
          </td>
        </tr>
        <tr>
          <td>initiallyActive</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            Toggle whether the toolbar is visible initially or if only the edit
            button is visible initially.
          </td>
        </tr>
        <tr>
          <td>addNode</td>
          <td>Boolean or Function</td>
          <td><code>true</code></td>
          <td>
            You can use these options to switch certain functionalities on or
            off of attach a handler function to them. These functions are called
            before the action is performed. If a node is going to be added
            through the manipulation system, the addNode function will be called
            first. With this, you can provide a gui for your users, abort the
            process or anything else you want to do. For all except the editNode
            functionality, these handler functions are optional. <br /><br />

            When you supply a boolean, you only toggle the 'add node' button on
            the GUI of the manipulation system. The lack of handling function
            could effect the API when using the methods. When a function is
            supplied, it will be called when the user clicks the canvas in
            'addNode' mode. This function will receive two variables: the
            properties of the node that can be created and a callback function.
            If you call the callback function with the properties of the new
            node, the node will be added. <br /><br />
            Example:
            <pre class="code">
var options = {
  manipulation: {
    addNode: function(nodeData,callback) {
      nodeData.label = 'hello world';
      callback(nodeData);
    }
  }
}
</pre
            >
            This function changes the label of the new node into 'hello world'.
            If you do not want the node created, do not call the callback
            function or call the callback function <code>null</code> or no
            argument.
          </td>
        </tr>
        <tr>
          <td>addEdge</td>
          <td>Boolean or Function</td>
          <td><code>true</code></td>
          <td>
            If boolean, toggle the availability of the 'addEdge' button in the
            GUI, the API through the methods will still work except (obviously)
            there will be no handler function. When a function is supplied, it
            will be called when the user drags the new edge from one node to the
            next in 'addEdge' mode. This function will receive two variables:
            the properties of the edge that can be created and a callback
            function. If you call the callback function with the properties of
            the new edge, the edge will be added. <br /><br />
            Example:
            <pre class="code">
var options = {
  manipulation: {
    addEdge: function(edgeData,callback) {
      if (edgeData.from === edgeData.to) {
        var r = confirm("Do you want to connect the node to itself?");
        if (r === true) {
          callback(edgeData);
        }
      }
      else {
        callback(edgeData);
      }
    }
  }
}
</pre
            >
            This example code will show a popup if you connect a node to itself
            to ask you if that was what you wanted. If you do not want the edge
            created, do not call the callback function or call the callback
            function <code>null</code> or no argument.
          </td>
        </tr>
        <tr>
          <td>editNode</td>
          <td>Function</td>
          <td><code>undefined</code></td>
          <td>
            Editing of nodes is only possible when a handling function is
            supplied. If this is not the case, editing of nodes will be
            disabled. The function will be called when a node is selected and
            the 'Edit Node' button on the toolbar is pressed. This function will
            be called like the <code>addNode</code> function with the node's
            data and a callback function.
          </td>
        </tr>
        <tr>
          <td>editEdge</td>
          <td>Boolean or Function</td>
          <td><code>true</code></td>
          <td>
            If boolean, toggle the editing of edges in the GUI. If a function is
            supplied, it will be called when an edge is selected and the 'Edit
            Edge' button on the toolbar is pressed. Initially, the endpoints of
            the edge may be dragged to connect to a different node, then the
            function will be called in the same way the
            <code>addEdge</code> function is called. If an object, if a function
            is given for the <code>'editWithoutDrag'</code> property, the
            function will be called immediately (without dragging any endpoints)
            in the same way the <code>addEdge</code> function is called. If the
            callback is not performed, the edge will remain hanging where it was
            released.
            <b
              >To cancel, call the callback function with <code>null</code> as
              argument or without arguments</b
            >.
          </td>
        </tr>
        <tr>
          <td>deleteNode</td>
          <td>Boolean or Function</td>
          <td><code>true</code></td>
          <td>
            If boolean, toggle the deletion of nodes in the GUI. If function, it
            will be called when a node is selected and the 'Delete selected'
            button is pressed. When using a function, it will receive a callback
            and an object with an array of selected nodeIds and an array of
            selected edges Ids. These are the items that will be deleted if the
            callback is performed.
          </td>
        </tr>
        <tr>
          <td>deleteEdge</td>
          <td>Boolean or Function</td>
          <td><code>true</code></td>
          <td>
            If boolean, toggle the deletion of edges in the GUI. If function, it
            will be called when an edge is selected and the 'Delete selected'
            button is pressed. When using a function, it will receive a callback
            and an object with an array of selected nodeIds (empty) and an array
            of selected edges Ids. These are the items that will be deleted if
            the callback is performed.
          </td>
        </tr>
        <tr>
          <td>controlNodeStyle</td>
          <td>Object</td>
          <td>Object</td>
          <td>
            You can supply any styling information you'd like here. All fields
            described in <a href="./nodes.html">the nodes module</a> are allowed
            except obviously for id, x, y and fixed. <br /><br />Default:
            <pre class="code">
{
  shape:'dot',
  size:6,
  color: {
    background: '#ff0000',
    border: '#3c3c3c',
    highlight: {
      background: '#07f968',
      border: '#3c3c3c'
    }
  },
  borderWidth: 2,
  borderWidthSelected: 2
}
</pre
            >
          </td>
        </tr>
      </table>

      <div class="flagbar">
        <a href="../../docs/network/manipulation.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/manipulation.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
